<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地震局培训平台</title>
		<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />-->
		<link rel="stylesheet" href="style/main.css" />
		<link rel="stylesheet" href="style/personal.css" />
	</head>

	<body>
		<div id="info">
			<div class="info">
				<div class="newsbox">
					<!--消息滚动-->
					<div class="news nowrap">消息：欢迎加入地震应急志愿者培训平台，您是第123456位访问用户。</div>
				</div>
				<div class="infobox">
					<div class="name nowrap">zhangming</div>
					<div class="info_id nowrap">N.8784547</div>
					<div class="sign_out">退出</div>
				</div>
				<div class="leave_m">互动留言</div>
			</div>
		</div>
		<nav id="nav">
				<div class="top">
					<div class="logo"></div>
					<div class="seachbox">
						<input type="text" id="search" value="在线课堂搜索" />
						<div class="weibo codeIcon">
							<div class="first">
								<img src="image/weiboCode.png" />
							</div>
						</div>
						<div class="weixin codeIcon">
							<div class="first">
								<img src="image/weixinCode.png" />
							</div>
						</div>
					</div>
				</div>
			</nav>
		<div id="show">
			
			<div id="content">
				<div class="left">
					<div class="top">
						<div class="headbox">
							<div class="head"></div>
						</div>
						<div class="name">用户名称</div>
						<div class="grade">五星志愿者
							<div class="grade_icon"></div>
						</div>
					</div>
					<div class="bottom">
							<div class="navbox">
								<div class="firstbox">
									<div class="first" data-url="lesson.html">我的课程</div>
								</div>
								<div class="firstbox">
									<div class="first" data-url="like.html">我的收藏</div>
								</div>
								<div class="firstbox">
									<div class="first" data-url="score.html">我的积分</div>
								</div>
								<div class="firstbox">
									<div class="first" data-url="dynamic.html">我的动态</div>
								</div>
								<div class="firstbox">
									<div class="first" data-url="modify.html">账号设置</div>
								</div>
								<div class="firstbox">
									<div class="first">志愿项目</div>
									<div class="secondbox">
										<div class="second" data-url="myProject.html">我的项目</div>
										<div class="second" data-url="work.html">我的排班</div>
										<div class="second" data-url="time.html">服务时长</div>
									</div>
								</div>
								<div class="firstbox">
									<div class="first" data-url="myTeam.html">我的团体</div>
								</div>
							</div>
						</div>
				</div>
				<div class="right">
					<iframe id="iframe" src="lesson.html" height="100%" width="100%" frameborder="0" scrolling="no" ></iframe>
				</div>
			</div>
			
			</div>
			<div id="bottom">
				<ul class="border">
					<li>相关协作单位：</li>
					<li>中国红十字会</li>
					<li>中科院心理所</li>
					<li>中国地震信息网</li>
					<li>中国地震科普网</li>
					<li>北京市地震局科普网 </li>
					<li>科普网</li>
				</ul>
				<div class="bottom">
					<ul class="one">
						<li>设为首页</li>
						<li>交换链接</li>
						<li>关于我们</li>
						<li>联系我们</li>
						<li>常见问题</li>
						<li>心理教室</li>
						<li>党团建设</li>
					</ul>
					<ul class="two">
						<li>主办：北京市地震局</li>
						<li>版权所有 京ICP备08988239</li>
						<li>技术支持：中宣助力传媒</li>
					</ul>
				</div>
			<script type="text/javascript" src="script/jquery.min.js"></script>
			<script type="text/javascript" src="script/ishoock.tools.js"></script>
			<script type="text/javascript" src="script/main.js"></script>
			<script>
				var index = 1,
					pre, num, timer;
				var play = true;
				var a = $("#banner .banner").children();
				var b = $("#banner .picBtn").children();
				Run();
				$(function() {
					$("ul li").on("mouseover", function() {
						$(this).in();
					});
					$("ul li").on("mouseleave", function() {
						$("ul li").removeIn();
					});
					$(".m_top .item").on("mouseover", function() {
						$(this).in();
					});
					$(".m_top .item").on("mouseleave", function() {
						$(".m_top .item").removeIn();
					});
					$(".m_right .img").on("mouseover", function() {
						$(this).in();
					});
					$(".m_right .img").on("mouseleave", function() {
						$(".m_right .img").removeIn();
					});
					$(".t_left  .head").on("mouseover", function() {
						$(this).in();
					});
					$(".t_left  .head").on("mouseleave", function() {
						$(".t_left  .head").removeIn();
					});
					//点击导航
					$(".navbox .first").on("click", function() {
						if(!$(this).parent().hasClass("in")) {
							$(".secondbox").slideUp();
							$(".firstbox").removeIn();
							$(this).parent().in();
							$(this).parent().children(".secondbox").slideDown();
							if($(this).attr("data-url")!==""){
								$("iframe").attr("src",$(this).attr("data-url"));
							}
						} else {
							$(this).parent().removeIn();
							$(this).parent().children(".secondbox").slideUp();
						}

					});
					//点击二级菜单
					$(".navbox .second").on("click", function() {
						$(".second").removeIn();
						$(this).in();
						$("iframe").attr("src",$(this).attr("data-url"));
					});
				})
			</script>
	</body>

</html>